<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>安全中心 - 找回密码</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

    <!-- 引入公共的 图标 -->
    <th:block th:replace="commonmenu::favicon"></th:block>

    <style>
        body {
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /*padding-top: 60px;*/
            /* 防止内容被底部遮挡，给body或主要容器添加下边距 */
            margin: 0 0 75px;            /* 底部区域高度，需与footer实际高度一致 */
        }

        /* 底部固定区域样式 */
        .layui-footer.footer {
            position: fixed;        /* 固定定位 */
            bottom: 0;              /* 固定在底部 */
            left: 0;                /* 左侧对齐 */
            right: 0;               /* 右侧对齐，确保宽度100% */
            text-align: center;     /* 新增，让内容居中 */
            height: 70px;           /* 底部固定区域高度*/
            background-color: #fff; /* 背景色根据需求设置 */
            /* 以下根据实际需求调整 */
            padding: 0 20px 0 20px;     /* 内边距 */
            border-top: 1px solid #eee; /* 顶部边框 */
            box-sizing: border-box; /* 包含边框和内边距 */
            z-index: 1000;          /* 确保层级在上方 */
        }

        h1, h2, h3, h4, h5, h6 {
            padding-left: 20px;
        }

        .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px; /* 增加边角圆润度 */
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); /* 增强阴影效果 */
            width: 400px;
        }

        .form-title {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px; /* 增大标题字体大小 */
            color: #333; /* 更改标题颜色 */
        }

        .top-bar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: #007AFF;
            color: white;
            padding: 15px 0;
            text-align: center;
            font-size: 20px;
            z-index: 1000;
        }

        /* 用于隐藏和显示元素的样式 */
        .hide {
            display: none;
        }

        /* 验证方式按钮样式 */
        .verify-btn {
            display: block;
            width: 90%;
            padding: 15px; /* 增加按钮内边距 */
            margin-bottom: 20px; /* 调整按钮间距 */
            border: 1px solid #ccc;
            border-radius: 8px; /* 增加按钮边角圆润度 */
            background-color: #f9f9f9;
            text-align: center;
            cursor: pointer;
            font-size: 16px; /* 增大按钮字体大小 */
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        .verify-btn.active {
            background-color: #007AFF;
            color: white;
            border-color: #007AFF;
        }

        .verify-btn:hover {
            background-color: #e6f2ff; /* 鼠标悬停时的背景颜色 */
        }

        /* 输入框样式 */
        .layui-input {
            border-radius: 6px; /* 增加输入框边角圆润度 */
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加输入框内阴影 */
            padding: 12px; /* 增加输入框内边距 */
            margin: 5px; /* 增加输入框外边距 */
            font-size: 16px; /* 增大输入框字体大小 */
        }

        /* 提示信息样式 */
        .form-container p {
            color: #666; /* 更改提示信息颜色 */
            font-size: 14px;
            line-height: 1.6; /* 调整行间距 */
        }

        /* 按钮样式 */
        .layui-btn {
            border-radius: 6px; /* 增加按钮边角圆润度 */
            /*padding: 12px 20px; !* 调整按钮内边距 *!*/
            font-size: 14px; /* 增大按钮字体大小 */
        }

        .layui-btn-primary {
            background-color: #007AFF;
            color: white;
            border-color: #007AFF;
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        .layui-btn-primary:hover {
            background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
        }

        .layui-btn-default {
            background-color: #f4f4f4;
            color: #666;
            border-color: #ccc;
            transition: background-color 0.3s ease; /* 添加过渡效果 */
        }

        .layui-btn-default:hover {
            background-color: #e6e6e6; /* 鼠标悬停时的背景颜色 */
        }
    </style>
</head>

<body>
<div class="layui-layout layui-layout-admin">

    <!-- 固定顶部信息栏 -->
    <div class="top-bar">RKSJGL安全中心</div>

    <!-- 预加载图片（隐藏） -->
    <img id="wechatImg" style="display: none;" th:src="@{/images/donation/wechat.jpg}">
    <img id="alipayImg" style="display: none;" th:src="@{/images/donation/alipay.png}">
    <!--底部固定区域-->
    <div class="layui-footer footer">
        <p><span>copyright @2025 Climb_LFZ</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="layui-btn-radius layui-btn layui-btn-danger layui-btn-sm"
               onclick="donation()">捐赠作者</a>
        </p>
        <p style="color: #666; font-size: 12px;margin-top: -15px">若以上方法都失败，请联系管理员进行重置密码
                , 微信号:lfz221019&nbsp;&nbsp;&nbsp;QQ:2945259325 验证：林</p>
    </div>

    <!-- 找回密码入口页面 -->
    <div class="form-container" id="step1">
        <h2 class="form-title">安全中心 - 找回密码</h2>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="username" placeholder="请输入用户名" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="step1Submit" lay-submit>下一步</button>
                    <a class="layui-btn layui-btn-primary" th:href="@{/toLogin}">返回登录页</a>
                </div>
            </div>
        </form>
    </div>

    <!-- 图片验证码验证页面 -->
    <div class="form-container" id="step2" style="display: none;">
        <h2 class="form-title">请完成安全验证</h2>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-block">
                    <img alt="验证码" id="captchaImg" th:src="@{/login/getCode}">
                    <a href="javascript:" id="refreshCaptcha">刷新验证码</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">输入验证码</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="captcha" placeholder="请输入图片中的字符" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="step2Submit" lay-submit>确认</button>
                    <button class="layui-btn layui-btn-primary" id="step1Back">返回上一步</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 选择身份验证方式页面 -->
    <div class="form-container" id="step3" style="display: none;">
        <h2 class="form-title">身份验证</h2>
        <p style="font-size: 14px;color: #8c8a8a">为了保护您的账户安全，RK 需要对您的身份进行验证，验证过后即可重新设置您的密码</p>
        <br>
        <div class="verify-btn" id="phoneVerifyBtn">
            <img alt="手机图标" src="https://img.icons8.com/?size=100&id=11413&format=png&color=000000">
            手机号验证<br>
            <p style="font-size: 14px;color: #8c8a8a;">通过<span class="maskedPhoneSpan" style="color: #ff8a00;"></span>接受短信验证码
            </p>
        </div>
        <div class="verify-btn" id="infoVerifyBtn">
            <img alt="人物图标" src="https://img.icons8.com/?size=100&id=Fx9MBGycMHE3&format=png&color=000000">
            资料辅助验证<br>
            <span style="font-size: 14px;color: #8c8a8a;">填写账号信息与个人资料进行验证</span>
        </div>
        <button class="layui-btn layui-btn-primary" id="step2Back">返回上一步</button>
    </div>

    <!-- 身份验证页面(手机号验证、资料辅助验证) -->
    <div class="form-container" id="step4" style="display: none;">
        <h2><span style="color: #0000FF">丨</span>找回密码</h2>
        <hr>

        <!-- 手机号验证 -->
        <div class="layui-form-item" id="phoneVerify">
            <h5 style="margin-bottom: 5px">手机号验证</h5>
            <h5 style="color: #666;">请填写完整的手机号 <span class="maskedPhoneSpan" style="color: #ff8a00;"></span> 以验证身份</h5>
            <!-- 隐藏的用户名（从第一步的 username 输入框获取） -->
            <input class="infoUsername" name="username" type="hidden">
            <div class="layui-input-block" style="width: 360px">
                <input class="layui-input" name="verifyPhone" placeholder="请输入完整的手机号" style="margin-left: -90px"
                       type="text">
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div style="display: flex; align-items: center;">
                        <div style="width: 210px; margin-right: 10px;">
                            <input class="layui-input" name="verifyCode" placeholder="请输入短信验证码" style="margin-left: -90px"
                                   type="text">
                        </div>
                        <div style="width: 105px; margin-left: -50px;margin-right: 30px">
                            <button class="layui-btn layui-btn-primary" id="sendSmsCode">发送验证码</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" disabled id="step4Next" lay-filter="step4Submit" lay-submit>下一步</button>
                    <button class="layui-btn layui-btn-primary step3Back">返回上一步</button>
                </div>
                <div class="layui-input-block" style="margin-top: 5px;margin-left: 0">
                    <span style="font-size:13px;color: #1e9fff;padding-right: 20px">手机号无法使用？</span>
                    <a class="extra-link tryInfoVerify" href="#" style="font-size:13px;color: #1e9fff">试试资料辅助验证</a>&nbsp;
                </div>
            </div>
        </div>

        <!-- 资料辅助验证 -->
        <div class="layui-form-item hide" id="infoVerify">
            <h5 style="margin-bottom: 5px">资料辅助验证</h5>
            <h5 style="color: #666;">请填写正确且完整的相应资料以验证身份</h5>
            <!-- 隐藏的用户名（从第一步的 username 输入框获取） -->
            <input class="infoUsername" name="username" type="hidden">
            <div class="layui-form-item">
                <div class="layui-form-label">姓名</div>
                <div class="layui-input-block">
                    <input class="layui-input" name="name" placeholder="请输入您的姓名" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label">身份证</div>
                <div class="layui-input-block">
                    <input class="layui-input" name="idCard" placeholder="请输入您的身份证" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label">住址</div>
                <div class="layui-input-block">
                    <input class="layui-input" name="address" placeholder="请输入您的住址" type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-filter="step4.1_Submit" lay-submit>下一步</button>
                    <button class="layui-btn layui-btn-primary step3Back">返回上一步</button>
                </div>
                <div class="layui-input-block" style="margin-top: 5px">
                    <a class="extra-link tryPhoneVerify" href="#" style="font-size:13px;color: #1e9fff">试试手机号验证</a>
                </div>
            </div>
        </div>
    </div>

    <!-- 密码重置页面 -->
    <div class="form-container" id="step5" style="display: none;">
        <h2 class="form-title">重置密码</h2>
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="newPassword" placeholder="请输入新密码" type="password">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认密码</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="confirmPassword" placeholder="请再次输入新密码" type="password">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn primary" lay-filter="step5Submit" lay-submit>完成</button>
<!--                    <a class="layui-btn default" th:href="@{/toLogin}">返回登录页</a>-->
                </div>
            </div>
        </form>
    </div>
</div>

<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        let currentUsername = ''; // 全局保存用户名

        // 第一步表单提交（用户提交想要找回密码的用户名）
        form.on('submit(step1Submit)', function (data) {
            if (data.field.username === '') {
                layer.msg('请输入用户名');
                return false;
            }
            currentUsername = data.field.username; // 保存用户名到全局变量
            $('#step1').hide();
            $('#step2').show();
            return false;
        });

        // 刷新验证码
        $('#refreshCaptcha').on('click', function () {
            $('#captchaImg').attr('src', '/login/getCode?t=' + new Date().getTime());
        });

        // 第二步表单提交（图形验证码验证）
        form.on('submit(step2Submit)', function (data) {
            if (data.field.captcha === '') {
                layer.msg('请输入验证码');
                return false;
            }
            // 发送AJAX验证验证码
            $.ajax({
                url: '/findPwd/checkCode',
                type: 'POST',
                data: {code: data.field.captcha},
                success: function (res) {
                    if (res.code === 200) {
                        // 验证码正确，继续检查用户名是否存在
                        $.ajax({
                            url: '/findPwd/checkUserExists',
                            type: 'POST',
                            // data: {username: $('#step1 input[name="username"]').val()},
                            data: {username: currentUsername}, // 此处改为使用全局变量
                            success: function (res) {
                                if (res.code === 200) {
                                    // 将手机号填充到第三步的输入框中，并进行密文处理
                                    var phone = res.data.phone;
                                    if (phone) {
                                        var maskedPhone = phone.slice(0, 3) + '****' + phone.slice(-4);
                                        // $('#step4 input[name="verifyPhone"]').val(maskedPhone);
                                        // 将密文手机号填充到对应的span标签中
                                        $('.maskedPhoneSpan').text(maskedPhone);
                                        correctPhone = phone; // 存储正确手机号用于后续校验
                                    }
                                    $('#step2').hide();
                                    $('#step3').show();
                                } else {
                                    layer.msg(res.msg, {
                                        icon: 5,
                                        time: 1500
                                    });
                                }
                            },
                            error: function () {
                                layer.msg('网络请求失败');
                            }
                        });
                    } else {
                        $('#captchaImg').attr('src', '/login/getCode?t=' + new Date().getTime());
                        layer.msg(res.msg);
                    }
                },
                error: function () {
                    layer.msg('网络请求失败');
                }
            });
            return false;
        });

        // 返回上一步(2—>1)
        $('#step1Back').on('click', function () {
            $('#step2').hide();
            $('#step1').show();
        });

        /** 第三步 选择身份验证方式 **/
        // 手机号验证按钮点击事件
        $('#phoneVerifyBtn').on('click', function () {
            // 从全局变量获取用户名并赋值给隐藏字段
            $('.infoUsername').val(currentUsername);
            $(this).addClass('active');
            $('#infoVerifyBtn').removeClass('active')
            $('#step4').show()
            $('#step3').hide()
            $('#phoneVerify').show();
            $('#infoVerify').hide();
        });

        // 资料辅助验证按钮点击事件
        $('#infoVerifyBtn').on('click', function () {
            // 从全局变量获取用户名并赋值给隐藏字段
            $('.infoUsername').val(currentUsername);
            $(this).addClass('active');
            $('#phoneVerifyBtn').removeClass('active');
            $('#step4').show()
            $('#step3').hide()
            $('#infoVerify').show();
            $('#phoneVerify').hide();
        });

        // 返回上一步(3->2)
        $('#step2Back').on('click', function () {
            $('#step3').hide();
            $('#step2').show();
        });

        // 手机号输入框实时校验（格式或长度）
        $('#step4 input[name="verifyPhone"]').on('input', function () {
            var phone = $(this).val();
            // 手机号格式校验（示例：11位数字）
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                $(this).addClass('layui-input-danger'); // 添加错误样式
                $('#step4Next').prop('disabled', true);
            } else {
                $(this).removeClass('layui-input-danger');
                // 若验证码正确且手机号格式正确，允许下一步（根据实际逻辑调整）
            }
        });

        // 验证码输入框实时验证
        $('#step4 input[name="verifyCode"]').on('input', function () {
            var code = $(this).val();
            if (code.length === 6) {
                $('#step4Next').prop('disabled', false);
            } else {
                $('#step4Next').prop('disabled', true);
                layer.msg("请输入6位数字验证码", {
                    icon: 5,
                    time: 1500
                });
            }
        });

        // ⚠️**发送短信验证码**
        $('#sendSmsCode').on('click', function (event) {
            event.preventDefault(); // 阻止默认行为
            var phone = $('#step4 input[name="verifyPhone"]').val();

            // 校验手机号格式
            if (!/^1[3-9]\d{9}$/.test(phone)) {
                layer.msg('请输入正确的11位手机号', { icon: 5, time: 1500 });
                return;
            }

            // **校验手机号是否已注册**
            $.ajax({
                url: '/findPwd/checkPhone', // 新增校验接口
                type: 'POST',
                data: { phone: phone },
                success: function (res) {
                    if (res.code === 200) {
                        // 手机号已注册，发送验证码
                        sendVerificationCode(phone);
                    } else {
                        layer.msg(res.msg, { icon: 5, time: 1500 });
                    }
                },
                error: function () {
                    layer.msg('网络请求失败', { icon: 5, time: 1500 });
                }
            });
            return false;
        });

        // 单独封装发送验证码函数
        function sendVerificationCode(phone) {
            $.ajax({
                url: '/findPwd/sendCode',
                type: 'POST',
                data: { phone: phone },
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg, { icon: 1, time: 1500 });
                        // 启动验证码倒计时（示例）
                        startCountdown();
                    } else {
                        layer.msg(res.msg, { icon: 5, time: 1500 });
                    }
                },
                error: function () {
                    layer.msg('网络请求失败', { icon: 5, time: 1500 });
                }
            });
        }

        // 验证码倒计时（示例）
        function startCountdown() {
            var btn = $('#sendSmsCode');
            var count = 60;
            btn.attr('disabled', true).text(`剩余${count}秒`);
            var timer = setInterval(function () {
                count--;
                if (count <= 0) {
                    btn.attr('disabled', false).text('发送验证码');
                    clearInterval(timer);
                } else {
                    btn.text(`剩余${count}秒`);
                }
            }, 1000);
        }

        // 第四步表单提交（身份验证：手机号+验证码校验）
        form.on('submit(step4Submit)', function (data) {
            var userInputPhone = $('#step4 input[name="verifyPhone"]').val(); // 用户输入的手机号
            var inputCode = $('#step4 input[name="verifyCode"]').val(); // 输入的验证码

            $.ajax({
                url: '/findPwd/checkSmsCode',
                type: 'POST',
                data: {phone: userInputPhone, inputCode: inputCode},
                success: function (res) {
                    if (res.code === 200) {
                        $('#step5').show();
                        $('#step4').hide();
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function () {
                    layer.msg('网络请求失败');
                }
            });
            return false;
        });

        // 第四步表单提交2（身份验证：资料辅助验证）
        form.on('submit(step4.1_Submit)', function (data) {
            var inputName = $('#infoVerify input[name="name"]').val(); // 从资料表单获取
            var inputIdCard = $('#infoVerify input[name="idCard"]').val();
            var inputAddress = $('#infoVerify input[name="address"]').val();
            var username = $('#infoUsername').val(); // 从隐藏字段获取（已在切换时赋值）

            // 前端非空校验
            if (!inputName.trim() || !inputIdCard.trim() || !inputAddress.trim()) {
                layer.msg('请完整填写所有资料项', {icon: 5, time: 1500});
                return false;
            }

            $.ajax({
                url: '/findPwd/checkInfo',
                type: 'POST',
                data: {name: inputName, idCard: inputIdCard, address: inputAddress, username: username},
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg('资料验证通过', {icon: 1, time: 1500});
                        $('#step5').show();
                        $('#step4').hide();
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                },
                error: function () {
                    layer.msg('网络请求失败，请重试', {icon: 5, time: 1500});
                }
            });
            return false;
        });

        // 点击“手机号无法使用？试试资料辅助验证”或者“试试资料辅助验证”
        $('.tryInfoVerify').on('click', function (e) {
            e.preventDefault();
            $('#infoVerifyBtn').addClass('active');
            $('#phoneVerifyBtn').removeClass('active');
            $('#infoVerify').show();
            $('#phoneVerify').hide();
            form.render(); // 重新渲染表单，确保样式更新
        });

        // 点击“试试手机号验证”
        $('.tryPhoneVerify').on('click', function (e) {
            e.preventDefault();
            $('#phoneVerifyBtn').addClass('active');
            $('#infoVerifyBtn').removeClass('active');
            $('#phoneVerify').show();
            $('#infoVerify').hide();
            form.render(); // 重新渲染表单，确保样式更新
        });

        // 返回上一步(4->3)
        $('.step3Back').on('click', function () {
            $('#step4').hide();
            $('#step3').show();
        });

        // 第五步表单提交（设置新密码）
        form.on('submit(step5Submit)', function (data) {
            if (data.field.newPassword === '') {
                layer.msg('请输入新密码');
                return false;
            }
            if (data.field.newPassword !== data.field.confirmPassword) {
                layer.msg('两次输入的密码不一致', {
                    icon: 5,
                    time: 1500
                });
                return false;
            }
            var verifyType = $('#phoneVerify').is(':visible') ? 'phone' : 'info';
            var phone = $('#step4 input[name="verifyPhone"]').val();
            var code = $('#step4 input[name="verifyCode"]').val();
            var username = $('.infoUsername').val();
            var newPassword = data.field.newPassword;

            $.ajax({
                url: '/findPwd/resetPwd',
                type: 'POST',
                data: {
                    phone: phone,
                    code: code,
                    newPassword: newPassword,
                    verifyType: verifyType,
                    username: username
                },
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg);
                        // 这里可以添加跳转到登录页的代码
                        layer.confirm('密码重置成功！是否立即返回登录界面重新登录？', {
                            icon: 1,
                            title: '操作确认',
                            btn: ['确认返回', '留在当前页'],
                            btnAlign: 'c'
                        }, function (confirmIndex) {
                            window.location.href = '/logout';
                            layer.close(confirmIndex);
                            layer.closeAll('dialog');
                        }, function () {
                            layer.msg('已取消返回', {
                                icon: 5,
                                time: 1500
                            });
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                },
                error: function () {
                    layer.msg('网络请求失败');
                }
            });
            return false;
        });
    });



    //获取图片路径
    WeChatSrc = document.getElementById("wechatImg").src;
    AlipaySrc = document.getElementById("alipayImg").src;

    //捐赠弹窗
    function donation() {
        layer.tab({
            area: ['260px', '405px'],
            tab: [
                {
                    title: "微信",
                    content:
                        `<div style='overflow:hidden;background:#d2d0d0;'>
                            <img src="${WeChatSrc}" alt='作者微信收款码' style="width: 260px">
                         </div>`
                }, {
                    title: "支付宝",
                    content:
                        `<div style='overflow:hidden;background:#d2d0d0;'>
                            <img src="${AlipaySrc}" alt='作者支付宝收款码' style="width: 260px">
                         </div>`
                }
            ]
        })
    }
</script>
</body>

</html>